<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>模板管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar" >
      <el-form :inline="true" :model="dataForm" :size="size" ref="dataForm">
         <el-row class="search-input">
        <el-form-item label="活动类型：">
          <el-select v-model="dataForm.promType" placeholder="请选择活动类型" clearable>
            <el-option label="单一促销" value="1"></el-option>
            <el-option label="满量促销" value="2"></el-option>
            <el-option label="满额促销" value="3"></el-option>
            <el-option label="秒杀" value="4"></el-option>
            <el-option label="赠送类促销" value="5"></el-option>
            <el-option label="组合促销" value="6"></el-option>
            <el-option label="单品X件优惠" value="7"></el-option>
            <el-option label="换购" value="8"></el-option>
            <el-option label="预售" value="9"></el-option>
            <el-option label="拼团" value="10"></el-option>
            <el-option label="优惠卷" value="11"></el-option>
            <el-option label="红包" value="12"></el-option>
            <el-option label="抽奖" value="13"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="id" label="ID： ">
          <el-input v-model="dataForm.id" clearable></el-input>
        </el-form-item>
        <el-form-item prop="templateName" label="名称： ">
          <el-input v-model="dataForm.templateName" clearable></el-input>
        </el-form-item>
       </el-row>
       <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              @click="pageQuery(1)"
              type="primary"
            />
          </el-form-item>
       </el-row>
      </el-form>
    </div>
  <div class="tab-container">
    <el-table
      :data="tableData"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554','text-align': 'center'}"
      :highlight-current-row="true"
      :max-height="1500"
      :size="size"
      :align="align"
      border>

      <el-table-column
        prop="id"
        label="ID"
        align="center">
      </el-table-column>
      <el-table-column
        align="center"
        prop="promType"
        label="活动类型">
        <template slot-scope="scope">
          <span v-if="scope.row.promType == 1">单一促销</span>
          <span v-else-if="scope.row.promType == 2">满量促销</span>
          <span v-else-if="scope.row.promType == 3">满额促销</span>
          <span v-else-if="scope.row.promType == 4">秒杀</span>
          <span v-else-if="scope.row.promType == 5">赠送类促销</span>
          <span v-else-if="scope.row.promType == 6">组合促销</span>
          <span v-else-if="scope.row.promType == 7">单品X件优惠</span>
          <span v-else-if="scope.row.promType == 8">换购</span>
          <span v-else-if="scope.row.promType == 9">预售</span>
          <span v-else-if="scope.row.promType == 10">拼团</span>
          <span v-else-if="scope.row.promType == 11">优惠卷</span>
          <span v-else-if="scope.row.promType == 12">红包</span>
          <span v-else-if="scope.row.promType == 13">抽奖</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="templateName"
        label="模板名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="creatorName"
        label="创建人">
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        align="left"
        fixed="right"
        label="操作"
        width="260">
        <template slot-scope="scope">
          <el-button @click="used(scope.row)" type="text" class="textButton btnText" >使用</el-button>
          <el-button @click="edit(scope.row)" type="text" class="textButton btnText">编辑</el-button>
          <el-button @click="del(scope.row)" type="text" class="btnText">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar t_r" >
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="currentChange"
        :current-page="dataForm.start"
        :page-size="dataForm.limit"
        :total="dataTotal"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
      ></el-pagination>
    </div>
  </div>
    <el-dialog
      :title="'编辑'"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      class="el-dialog-style"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editForm"
        :size="size"
        label-width="130px"
      >
        <el-form-item label="id：" prop="id" v-if="false">
          <el-input :disabled="true" v-model="editForm.id"></el-input>
        </el-form-item>
        <el-form-item label="模板名称：" prop="templateName">
          <el-input v-model="editForm.templateName" clearable ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain :size="size" @click="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click="editSubmitForm"
        >{{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";

export default {
  components: {
    KtButton
  },
  data() {
    return {
      dataForm: {
        id: null,
        promType: null,
        templateName: null,
        start: 1,
        limit: 10
      },
      dataTotal: 0,
      editForm: {
        id: null,
        templateName: null
      },
      editFormRules: {
        templateName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" }
        ]
      },
      tableData: [],
      size: "small",
      align: "center",
      editDialogVisible: false
    };
  },
  methods: {
    // 分页查询
    pageQuery(pageNo) {
      this.dataForm.start = pageNo;
      let callback = res => {
        if (res.code == "0000") {
          this.tableData = res.data.rows;
          this.dataTotal = res.data.total;
        } else {
          this.$message({ message: "查询失败", type: "fail" });
        }
      };
      this.utils.request.templatePageQuery(this.dataForm, callback);
    },
    currentChange(start) {
      this.pageQuery(start);
    },
    sizeChange(limit) {
      this.dataForm.limit = limit;
      this.pageQuery(1);
    },

    editSubmitForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let callback = res => {
            if (res.code == "0000") {
              this.editDialogVisible = false;
              this.$message({ message: "编辑成功", type: "success" });
            } else {
              this.$message({ message: "编辑失败", type: "fail" });
            }
          };
          this.utils.request.templateEdit(this.editForm, callback);
        }
      });
    },

    // 使用模板，使用的时候先复制再跳转
    used(row) {
      // 单一
      // if(row.promType == 1){
      //   let callback = res => {
      //     if(res.code=="0000"){
      //       console.log(res);
      //       this.$router.push(`/SinglePromotionCreate?value=${res.data}&auth=0`);
      //     }else {
      //       this.$message({ message: "使用模板失败", type: "fail" });
      //     }
      //   };
      //   let parm = {};
      //   parm.promotionId = row.promotionId;
      //   this.utils.request.promotionSingleCopyById(parm, callback);
      // }
      //
      // 预售
      if (row.promType == 9) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push(
              `/presellPromotionEvent?value=${res.data}&auth=0`
            );
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.presellCopy(parm, callback);
      }
      // 组合
      else if (row.promType == 6) {
        // 组合
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({ path: "/ComplexPromotionCreate/" + res.data });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.id = row.promotionId;
        this.utils.request.promotionDeepCopy(parm, callback);
      }
      // 单品X
      // else if(row.promType == 7){
      //   let callback = res => {
      //     if(res.code=="0000"){
      //       console.log(res);
      //       this.$router.push(`/AddOrUpdateXofferPromotion1?id=${res.data}&auth=0`);
      //     }else {
      //       this.$message({ message: "使用模板失败", type: "fail" });
      //     }
      //   };
      //   let parm = {};
      //   parm.promotionId = row.promotionId;
      //   this.utils.request.copyXofferPromotion(parm, callback);
      // }
      // 拼团
      else if (row.promType == 10) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push(
              `/GroupActivityComponentsNew?id=${res.data}&auth=0&active=1`
            );
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.grouponCopy(parm, callback);
      }
      // 抽奖
      else if (row.promType == 13) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({ path: "/LotteryRuleEventCopy/" + res.data });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.id = row.promotionId;
        this.utils.request.copyLotteryActivity(parm, callback);
      }
      // 秒杀
      else if (row.promType == 4) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({
              path: "/SeckillPromotionAdd",
              query: { promotionId: res.data }
            });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.skillCopyConfig(parm, callback);
      }
      // 满量
      else if (row.promType == 2) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({
              path: "/FullNumPromotionAdd",
              query: { promotionId: res.data }
            });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.fullNumCopyConfig(parm, callback);
      }
      // 优惠券
      else if (row.promType == 11) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({
              path: "/CouponComponents",
              query: { promotionId: res.data }
            });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.couponCopyConfig(parm, callback);
      }
      // 红包
      else if (row.promType == 12) {
        let callback = res => {
          if (res.code == "0000") {
            console.log(res);
            this.$router.push({
              path: "/RedEnvelopeComponents",
              query: { promotionId: res.data }
            });
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        this.utils.request.couponCopyConfig(parm, callback);
      }
      // 满额 赠送 换购
      else if (
        row.promType == 3 ||
        row.promType == 5 ||
        row.promType == 8 ||
        row.promType == 1 ||
        row.promType == 7
      ) {
        let callback = res => {
          if (res.code == "0000") {
            if (row.promType == 3) {
              this.$router.push(`/fullPromotionCreate?id=${res.data}&auth=0`);
            } else if (row.promType == 1) {
              this.$router.push(`/singlePromotionCreate?id=${res.data}&auth=0`);
            } else if (row.promType == 7) {
              this.$router.push(`/xofferPromotionCreate?id=${res.data}&auth=0`);
            } else if (row.promType == 5) {
              this.$router.push(`/giftPromotionCreate?id=${res.data}&auth=0`);
            } else {
              this.$router.push(
                `/increasePromotionCreate?id=${res.data}&auth=0`
              );
            }
          } else {
            this.$message({ message: "使用模板失败", type: "fail" });
          }
        };
        let parm = {};
        parm.promotionId = row.promotionId;
        marketRequest.promotionDeepCopy(parm, callback);
      }
    },

    edit(row) {
      if (row.promType == 9) {
        this.$router.push(
          `/presellPromotionEvent?value=${row.promotionId}&auth=0`
        );
      }
      // 组合
      else if (row.promType == 6) {
        this.$router.push({ path: "/ComplexPromotionCreate/" + row.promotionId });
      }
      // 拼团
      else if (row.promType == 10) {
        this.$router.push(
          `/GroupActivityComponentsNew?id=${row.promotionId}&auth=0&active=1`
        );
      }
      // 抽奖
      else if (row.promType == 13) {
        this.$router.push({ path: "/LotteryRuleEventCopy/" + row.promotionId });
      }
      // 秒杀
      else if (row.promType == 4) {
        this.$router.push({
          path: "/SeckillPromotionAdd",
          query: { promotionId: row.promotionId}
        });
      }
      // 满量
      else if (row.promType == 2) {
        this.$router.push({
          path: "/FullNumPromotionAdd",
          query: { promotionId: row.promotionId }
        });
      }
      // 优惠券
      else if (row.promType == 11) {
        this.$router.push({
          path: "/CouponComponents",
          query: { promotionId: row.promotionId }
        });
      }
      // 红包
      else if (row.promType == 12) {
        this.$router.push({
          path: "/RedEnvelopeComponents",
          query: { promotionId: row.promotionId }
        });
      }
      // 满额 赠送 换购
      else if (
        row.promType == 3 ||
        row.promType == 5 ||
        row.promType == 8 ||
        row.promType == 1 ||
        row.promType == 7
      ) {
        if (row.promType == 3) {
          this.$router.push(`/fullPromotionCreate?id=${row.promotionId}&auth=0`);
        } else if (row.promType == 1) {
          this.$router.push(`/singlePromotionCreate?id=${row.promotionId}&auth=0`);
        } else if (row.promType == 7) {
          this.$router.push(`/xofferPromotionCreate?id=${row.promotionId}&auth=0`);
        } else if (row.promType == 5) {
          this.$router.push(`/giftPromotionCreate?id=${row.promotionId}&auth=0`);
        } else {
          this.$router.push(
            `/increasePromotionCreate?id=${row.promotionId}&auth=0`
          );
        }
      }


    },

    del(row) {
      this.$confirm("确定删除吗？", "提示", {
        type: "warning"
      }).then(() => {
        let callback = res => {
          if (res.code == "0000") {
            this.pageQuery(1);
            this.$message({ message: "删除成功", type: "success" });
          } else {
            this.$message({ message: "编辑失败", type: "fail" });
          }
        };
        let parm = {};
        parm.id = row.id;
        this.utils.request.templateDelete(parm, callback);
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.pageQuery(1);
  }
};
</script>
<style scoped lang="scss">
.textButton {
  margin-left: 1px;
}
</style>
